<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>New Order</title>
    <script type="text/javascript" src="../js/OrderTab.js"></script>
</head>
<body>
<div th:replace="common/top"></div>
<div id="Center-Content">
    <form action="submitOrder" method="post">
        <div id="OrderTabs">
            <ul>
                <li><a href="#tabs-1">Payment Details</a></li>
                <li><a href="#tabs-2" id="shipAddrLink" class="disabled" >Shipping Address</a></li>
            </ul>


            <div id="tabs-1">
                <table class="rwd-table">
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>
                    <tr>
                        <td>Card Type:</td>
                        <td>
                            <select name="cardType">
                                <option value="Visa">Visa</option>
                                <option value="MasterCard">MastercCard</option>
                                <option value="American Express">American Express</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Card Number:</td>
                        <td><input type="text" name="creditCard" th:value="${session.order.creditCard}"/> * Use a fake
                            number!
                        </td>
                    </tr>
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td><input type="text" name="expiryDate" th:value="${session.order.expiryDate}"/></td>
                    </tr>
                    <tr>
                        <th colspan=2>Billing Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td><input type="text" name="billToFirstName" th:value="${session.order.billToFirstName}"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" t name="billToLastName" th:value="${session.order.billToLastName}"/></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type="text" size="40" name="billAddress1" th:value="${session.order.billAddress1}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type="text" size="40" name="billAddress2" th:value="${session.order.billAddress2}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type="text" name="billCity" th:value="${session.order.billCity}"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type="text" size="4" name="billState" th:value="${session.order.billState}"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type="text" size="10" name="billZip" th:value="${session.order.billZip}"/></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type="text"  size="15" name="billCountry" th:value="${session.order.billCountry}"/>
                        </td>
                    </tr>

                    <tr>
                        <td colspan=2>
                            <input type="checkbox" name="shippingAddressRequired" onchange="checkboxChange(this)"/>
                            Ship to different address...
                        </td>
                    </tr>

                </table>
            </div>

            <div id="tabs-2">
                <table class="rwd-table">
                    <tr>
                        <th colspan=2>Shipping Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td><input type="text" name="shipToFirstName" th:value="${session.order.shipToFirstName}"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" t name="shipToLastName" th:value="${session.order.shipToLastName}"/></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type="text" size="40" name="shipAddress1" th:value="${session.order.shipAddress1}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type="text" size="40" name="shipAddress2" th:value="${session.order.shipAddress2}"/>
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type="text" name="shipCity" th:value="${session.order.shipCity}"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type="text" size="4" name="shipState" th:value="${session.order.shipState}"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type="text" size="10" name="shipZip" th:value="${session.order.shipZip}"/></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type="text" size="15" name="shipCountry" th:value="${session.order.shipCountry}"/></td>
                    </tr>


                </table>

            </div>

            <p>
                <input type="submit" name="newOrder" value="Submit" class="btn"/>
            </p>

        </div>

        <script>
            $( "#OrderTabs" ).tabs();
        </script>

    </form>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>